<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Account Setting</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css" />
<script type="text/javascript">

	function hide(){
	 document.getElementById('checkTrue').style.display='none';
	 document.getElementById('checkFalse').style.display='none';
	 document.getElementById('checkTruePass').style.display='none';
	 document.getElementById('checkTrueOldPass').style.display='none';
	 document.getElementById('checkFalseOldPass').style.display='none';
	}

	function flyToPage(task,nomor){

		if(task=='editAccount'){
			if(document.getElementById('checkTrueOldPass').style.display==''){
			document.forms[0].elements['cModel.password'].value = document.getElementById('oldPassword').value;
		
			var capNum = document.getElementById('captchaNum').value;

			<%String key1 = session.getAttribute("key").toString();%> 
 	
 				if(capNum == '<%=key1%>'){
 				document.forms[0].elements['cModel.newPassword'].value = document.getElementById('newPassword').value;
 				}else{
 				alert('Please check captcha again');
 				return;
 				}
 				document.forms[0].task.value = task;
 	 			document.forms[0].nomor.value = nomor;
 	 			document.forms[0].submit();
			}else{
				alert('Please insert valid old password');
				return;
			}	
		}
		if(task=='cancel'){
 			document.forms[0].task.value = task;
 			document.forms[0].nomor.value = 5;
 			document.forms[0].submit();
		}
		
	}
	
	function checkPassword(){
		var newPassword = "";
		var newPassConfirm = "";
		
		if(document.getElementById('newPassword').value!=null || document.getElementById('newPassword').value!=""){
			newPassword =  document.getElementById('newPassword').value;	
		}
		if(document.getElementById('confirmNewPass').value!=null || document.getElementById('confirmNewPass').value!=""){
			newPassConfirm = document.getElementById('confirmNewPass').value;
		}
		if(newPassConfirm == newPassword){
			document.getElementById('checkTrue').style.display='';
			document.getElementById('checkTruePass').style.display='';
			document.getElementById('checkFalse').style.display='none';
		}else{
			document.getElementById('checkFalse').style.display='';
			document.getElementById('checkTrue').style.display='none';
		}
	}
	
	function checkOldPassword(val){
		
		var task = 'checkOldPassword';
		var status;

		$.ajax({
			type : "POST",
			url : "/WebFinalProject/Candidate.do",
			data : "password=" + val + "&task=" + task,
			success : function(response) {
				status = response;
				if(status=="1"){
					document.getElementById('checkTrueOldPass').style.display='';
					document.getElementById('checkFalseOldPass').style.display='none';
				}else{
					document.getElementById('checkTrueOldPass').style.display='none';
					document.getElementById('checkFalseOldPass').style.display='';
				}
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});

	}
</script>
</head>
<body onload="javascript:hide();">
	<table width="1000px" class="bodyTable boxShadow">

		<!-- Header -->
		<tr>
			<td colspan="2"><%@include file="/include/Header.jsp"%></td>
		</tr>
		<tr>
			<td rowspan="2" width="200px" class="navigationBox"><%@include
					file="/include/Navigation.jsp"%></td>
			<td align="center" class="headerBox blueBackground">Account Setting</td>
		</tr>
		<tr>
			<td align="center" class="contentStyle"><br> 
			<html:form action="/Candidate" method="post">
			<html:hidden property="task" name="candidateForm" />
			<html:hidden property="password" name="candidateForm" />
			<html:hidden property="cModel.newPassword" name="candidateForm" />
			<html:hidden property="cModel.password" name="candidateForm" />
			<html:hidden property="nomor" name="candidateForm" />
				<table align="center" >
					<tr>
						<td style=" padding: 5px 7px;">User Id</td>
						<td>:</td>
						<td style=" padding: 5px 7px;">
						<html:text name="candidateForm" property="cModel.userId" readonly="true"/>
						</td>
					</tr>
					<tr>
						<td style=" padding: 5px 7px;">Password</td>
						<td>:</td>
						<td style=" padding: 5px 7px;">
						<input type="password" id="oldPassword"  onchange="javascript:checkOldPassword(this.value);"  maxlength="8"/>
						</td>
						<td >
						<div id="checkTrueOldPass"> 
						<img src="images/checkTrue.jpg">
						</div>
						
						<div id="checkFalseOldPass">
						<img src="images/checkFalse.png"><font color="red"><h4>Please input valid password</h4></font>
						</div>
						</td>
					</tr>
					<tr>
						<td style=" padding: 5px 7px;">New Password</td>
						<td>:</td>
						<td style=" padding: 5px 7px;">
							<input type="password" id="newPassword"  maxlength="8"/>
						</td>
						<td>
							<div id="checkTruePass"> 
							<img src="images/checkTrue.jpg">
							</div>
						</td>
					</tr>
					<tr>
						<td style=" padding: 5px 7px;">Confirm New Password</td>
						<td>:</td>
						<td style=" padding: 5px 7px;">
						<input type="password" id="confirmNewPass"  onKeyUp="javascript:checkPassword();"  maxlength="8"/>
						</td>
						<td >
						<div id="checkTrue"> 
						<img src="images/checkTrue.jpg">
						</div>
						
						<div id="checkFalse">
						<img src="images/checkFalse.png"><font color="red"><h4>Please input valid new password</h4></font>
						</div>
						</td>
					</tr>
					<tr>
						<td style=" padding: 5px 7px;" colspan="2">
						<img src="images/captcha.jpeg">&nbsp;
						<input  type="text" id="captchaNum">
						</td>
					</tr>
					<tr>
						<td align="center" style="vertical-align: middle; padding: 5px 7px;">
							<input type="button" class="buttonStyle" value="Send" onclick="javascript:flyToPage('editAccount',1);">
							<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPage('cancel',3);">
						</td>
					</tr>
				</table>
				</html:form>
				</td>
		</tr>
		</table>
</body>
</html>
